<template>
  <div class="home">
    <ul class="top">
      <li>登录</li>
      <p style="margin-left: 10px;">|</p>
      <li>注册</li>
      <li>我的订单</li>
      <li>我的收藏</li>
      <li>购物车</li>
      
    </ul>
    <div class="main">
     <p style="height: 50px;"> <img src="img/logo.c8999c02.png" alt=""></p>
      <ul>
        <router-link to="index"><li style="width: 40px;">首页</li></router-link>
        <router-link to="allgoods"><li style="width: 80px;">全部商品</li></router-link>
       <router-link to="aboutus"> <li style="width: 80px;">关于我们</li></router-link>
      </ul>

      
     
      <!-- 搜索 -->
      <el-input placeholder="请输入内容"  class="input-with-select">
        
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <hr width="74%" style="margin-left: 200px;" size="5px" color="blue">
    <!-- bodys -->
    <div class="bodys">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName:''
    }
  },
  methods: {
    
  },
}
</script>
<style>
  .top{
    display: flex;
    height: 40px;
    line-height: 40px;
    background: #3d3d3d;
    color: gray;
    list-style: none;
    padding-left: 200px;
    padding-right: 200px;
  }
   .top li:first-child{
    margin-left: 70%;
  }
   .top li {
    margin-left: 20px;
  }
  .top li:hover{
    color: white;
  }
  .main{
    padding-left: 200px;
    padding-right: 200px;
    display: flex;
    
  }

 .main ul {
   display: flex;
   list-style: none;
    width: 200%;
 }
 .main ul li {
   border-bottom: 1px solid #000;
   height: 40px;
   text-align: center;
   margin-left: 15px;
   
 }
 .bodys{
   background: pink;
   width: 100%;
   height: 100%;
   padding-left: 200px;
    padding-right: 200px;
    box-sizing: border-box;
 }
 .home{
   width: 100%;
   height: 100%;
 }
</style>
